<!--
 * @Description: 选择将要进入的租户
                 多租户模式下使用 
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2022-05-27 09:52:12
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-07-26 14:20:19
-->
  <template>
  <div class="tenant-select">
    <div class="tenant-select-main-container">
      <div class="back-button">
        <fks-button @click="goLogin" text>
          <i class="fks-icon-arrow-left" style="margin-right: 8px" />
          {{ LANG.BACK_TO_LOGIN }}
        </fks-button>
      </div>
      <!-- 标题 -->
      <div class="tenant-select-title">{{ LANG.TIP_SELECT_ORG }}</div>
      <div class="tenant-select-desc">{{ LANG.TIP_AVALIABLE_ORGS }}</div>
      <!-- 选择列表 -->
      <div class="tenant-select-list">
        <div
          class="tenant-select-list-item"
          v-for="(item, index) in tenantListForChoose"
          :key="index"
          @click="chooseTenant(item)"
        >
          <div class="left-icon">
            <svg-icon icon-class="tenant"></svg-icon>
          </div>
          <div class="text" :title="item.tenantName">
            {{ item.tenantName }}

            <fks-button
              type="primary"
              size="mini"
              v-if="item.clientId == 'fawkes'"
            >
              {{ LANG.TENANT_CONSOLE }}
            </fks-button>
          </div>

          <div class="right-icon">
            <i class="fks-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserClients } from '@/saas/api'
import { reloadClientConfig } from '@/saas/util'
import { IS_SAAS_MODE } from '@/store/Getter/getterTypes.js'
export default {
  name: 'TenantSelect',
  props: {},
  computed: {
    isSaasMode() {
      return this.$store.getters[IS_SAAS_MODE]
    },
    tenantListForChoose() {
      switch (this.isSaasMode) {
        case false:
          return []
        case 'main':
          return this.tenantList.filter((item) => item.clientId == 'fawkes')
        default:
          return this.tenantList.filter((item) => item.clientId != 'fawkes')
      }
    }
  },
  data() {
    return {
      tenantList: []
    }
  },
  watch: {},
  methods: {
    goLogin() {
      this.$router.push('/login')
    },
    /**
     * @description: 切换tenant，重新载入应用配置
     */
    chooseTenant(item) {
      let { tenantId, clientId, clientSecret } = item
      reloadClientConfig({ tenantId, clientId, clientSecret })
    },
    getUserClients() {
      getUserClients().then((res) => {
        this.tenantList = res.data
      })
    }
  },
  mounted() {
    if (!this.isSaasMode) {
      this.redirectTo()
      return
    }
    this.getUserClients()
  }
}
</script>

<style lang="scss" scoped>
.tenant-select {
  width: 337px;
  min-height: 494px;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  position: relative;

  &-main-container {
    padding: 24px;
  }

  &-title {
    margin-top: 24px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 33px;
  }
  &-desc {
    margin-top: 8px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
  }
  &-list {
    margin-top: 24px;
    max-height: 305px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    &-item {
      position: relative;
      height: 56px;
      background: #f2f2f5;
      border-radius: 4px;
      display: flex;
      padding: 8px;
      cursor: pointer;

      &:hover {
        background: #fafafb;
        .right-icon {
          color: var(--theme-color);
        }
      }

      margin-top: 16px;
      &:nth-child(1) {
        margin-top: 0;
      }
      .left-icon {
        flex-grow: 0;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background: var(--theme-color);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        svg {
          margin: 0 auto;
          width: 24px;
          height: 24px;
        }
      }
      .right-icon {
        flex-grow: 0;
        flex-shrink: 0;
        width: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .text {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 40px;
        margin: 0 16px;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>